<template>
  <div class="w-full h-full flex flex-col">
    <n-grid x-gap="5" y-gap="5">
      <n-gi :span="12">
        <mycard class="h-36 w-full bg-white">
          <div class="flex justify-start items-center h-30">
            <n-avatar
                round
                class="h-26 w-26 mr-2"
                object-fit="contain"
                src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
            />
            <div class="flex justify-center items-start flex-col ml-2">
              <span class="text-3xl">你好, DVAdmin, 开始您一天的工作吧！</span>
              <div>
                <span class="text-xl">{{ daojishi }}</span>
                <n-button @click="ctldrawer" type="primary" size="small" class="mx-1">设置上下班时间</n-button>
              </div>
            </div>
          </div>
        </mycard>
      </n-gi>
      <n-gi :span="12">
        <mycard class="h-36 w-full bg-white">
          <tianqi></tianqi>
        </mycard>
      </n-gi>
      <n-gi :span="12">
        <mycard class="h-36 w-full bg-white">
          <flextable :column.sync="schedulecolumns" :tabledata="scheduletabledata" :showctl="false"></flextable>
        </mycard>
      </n-gi>
      <n-gi :span="12">
        <mycard class="h-36 w-full bg-white">
          <flextable :column.sync="eamilcolumns" :tabledata="emailtabledata" :showctl="false"></flextable>
        </mycard>
      </n-gi>
      <n-gi :span="12">
        <mycard title="未读信息" class="h-36 w-full bg-white">
          111
        </mycard>
      </n-gi>
    </n-grid>
  </div>
</template>

<script setup name="Work">
import {useRoute, useRouter} from "vue-router";
import {NButton} from "naive-ui";
import uselocalStorage from '../../../../hooks/uselocalstorage'
import usetime from '../../../../hooks/mytime'
import useState from '../../../../hooks/useState'

const router = useRouter()
const route = useRoute()

const eamilcolumns = ref([
  {
    title: "序号", key: "index", width: 60, show: true, render: (rowData, rowIndex) => {
      return rowIndex + 1
    }
  },
  {title: "邮件标题", key: "name", show: true},
  {
    title: "接收时间", key: "createdTime", show: true, render: (rowData, rowIndex) => {
      return rowData["createdTime"] || rowData["createdTime"] === 0 ? new Date(rowData["createdTime"]).toLocaleString("zh", {
        year: 'numeric',
        month: 'numeric',
        day: 'numeric',
        hour12: false,
        hour: 'numeric',
        minute: 'numeric',
        second: 'numeric'
      }) : ""
    }
  },
  {
    title: "查看", key: "view", width: 80, show: true, render: (rowData, rowIndex) => {
      return h(NButton, {
        onClick: () => {
          emailhandleView(rowData)
        }, size: "small"
      }, {
        default() {
          return "查看"
        }
      })
    }
  },
  {
    title: "已读", key: "view", width: 80, show: true, render: (rowData, rowIndex) => {
      return h(NButton, {
        onClick: () => {
          emailhandleEdit(rowData)
        }, size: "small"
      }, {
        default() {
          return "已读"
        }
      })
    }
  },
])
const emailtabledata = ref([])
// 点击查看
const emailhandleView = () => {
}
// 点击已读
const emailhandleEdit = () => {
}


// 日程
const schedulecolumns = ref([
  {
    title: "序号", key: "index", width: 60, show: true, render: (rowData, rowIndex) => {
      return rowIndex + 1
    }
  },
  {title: "日程内容", key: "name", show: true},
  {
    title: "提醒时间", key: "createdTime", show: true, render: (rowData, rowIndex) => {
      return rowData["createdTime"] || rowData["createdTime"] === 0 ? new Date(rowData["createdTime"]).toLocaleString("zh", {
        year: 'numeric',
        month: 'numeric',
        day: 'numeric',
        hour12: false,
        hour: 'numeric',
        minute: 'numeric',
        second: 'numeric'
      }) : ""
    }
  },
  {
    title: "查看", key: "view", width: 80, show: true, render: (rowData, rowIndex) => {
      return h(NButton, {
        onClick: () => {
          schedulehandleView(rowData)
        }, size: "small"
      }, {
        default() {
          return "查看"
        }
      })
    }
  },
  {
    title: "已读", key: "view", width: 80, show: true, render: (rowData, rowIndex) => {
      return h(NButton, {
        onClick: () => {
          schedulehandleEdit(rowData)
        }, size: "small"
      }, {
        default() {
          return "已读"
        }
      })
    }
  },
])
const scheduletabledata = ref([])
// 点击查看
const schedulehandleView = () => {
}
// 点击已读
const schedulehandleEdit = () => {
}


// 上班时间
const timetostr = (shijian) => {
  const xiaoshi = Math.floor(shijian / (60 * 60 * 1000))
  const fenzhong = Math.floor((shijian % (60 * 60 * 1000)) / (60 * 1000))
  const miaozhong = Math.floor(((shijian % (60 * 60 * 1000)) % (60 * 1000)) / 1000)
  return `${xiaoshi<10?"0"+xiaoshi:xiaoshi}:${fenzhong<10?"0"+fenzhong:fenzhong}:${miaozhong<10?"0"+miaozhong:miaozhong}`
}
const workTime = useState("workTime", {startTime: null, endTime: null})
const nowTime = usetime()
const daojishi = computed(() => {
  // 通过取余的方式获取毫秒值
  const shangban = workTime.value.startTime % (24 * 60 * 60 * 1000)
  const xiaban = workTime.value.endTime % (24 * 60 * 60 * 1000)
  const xianzai = nowTime.value.getTime() % (24 * 60 * 60 * 1000)
  if (xianzai < shangban) {
    return `还有${timetostr(shangban - xianzai)}上班`
  }
  if (xianzai > xiaban) {
    return `已经下班${timetostr(xianzai - xiaban)},你怎么还在啊？`
  }
  return `还有${timetostr(xiaban - xianzai)}下班`
})

// 抽屉显示隐藏
const drawerActive = useState("drawerActive",false)
const ctldrawer=()=>{
  drawerActive.value = !drawerActive.value
}

watch(workTime,()=>{
  console.log("组件监听到一次变化")
})
</script>

<style scoped>

</style>
